<template>
	<view>
		<view class="taocan-info" v-if="MonthCard_list.length!=0">
			<text class="taocan-info-title">请选择套餐</text>
			<view v-if="isShowid<item.id"
				:class="selectItem.id==item.id ? 'month-card-info-selected':'month-card-info-select'"
				v-for="(item,index) in MonthCard_list" :key="item.id"
				@click="monthCardSelect(item.id,item.Price,item.levelName)">
				<view class="month-card-info-right-title">
					<text class="zhekou">{{item.zhekou+'折'}}</text>
					<text class="renshu">{{item.imgstwo}}元/{{item.levelName.slice(0,item.levelName.length-1)}}</text>
				</view>
				<text class="month-card-info-title">{{'尊享'+item.levelName}}</text>
				<text class="month-card-info-introduce"> · 使用周期{{item.duration}}天</br> · 可雇佣{{item.numberPeople}}人，<text
						style="color: #000000;font-weight: Bold;">{{Math.round((item.Price/item.numberPeople)*10)/10}}元/人</text></br>
					· 单日最高可雇佣{{item.levelNubmer}}人</br>
				</text>
				<view class="month-card-info-right">
					<text>{{item.Price}}</text>元/{{item.levelName.slice(0,item.levelName.length-1)}}
					<view v-if="item.id==1 && isCoupon618==='1'" class="month-card-info-right-youhui">
						<image src="../../static/icon3/youhui123rewdsf.png" mode="aspectFill"></image>
						<text>{{text618}}</text>
						<!-- 特惠赠送108元优惠券 -->
					</view>
				</view>
			</view>
		</view>
		<view class="hg-128"></view>
		<view class="buy-button" v-if="selectItem.id!=undefined" @click="buy()">
			<text>
				{{(selectItem.Price!=null?selectItem.Price:'158')+'元开通尊享'+selectItem.levelName}}
			</text>
		</view>
		<ChangePay @closePayPage='closePayPage' v-if="isShowPay" :title='payInfo' :monery='straightCardPay_price'
			:unsealId='-2' :cardId='straightCardPay_id' :url="`${$api.v1_Buy_monthly_card}`" keyWorld='commodityPrice'
			:contnet="requestObj" isJson='0' buycode=1 @paySuccess='paySuccess'>
		</ChangePay>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				payInfo: '',
				straightCardPay_id: 0,
				straightCardPay_price: 0,
				MonthCard_list: [],
				selectItem: {},
				isShowPay: false,
				yKType: 0,
				isAdd: false,
				isShowid: 0,
				tempTrade: '',
				isCoupon618: '',
				text618: '',
				requestObj: {
					cardId: ''
				},
				levelName: '',
				levelName: ''
			}
		},
		watch: {
			'straightCardPay_id': {
				handler(n, l) {
					console.log(n, 777)
					this.requestObj.cardId = n
					// `1.当月生效，有效期${([1,9].includes(n)&&'30天')||([2,10].includes(n)&&'半年时间')||([3,11].includes(n)&&'1年时间')||([12].includes(n)&&'5天体验') }
					this.payInfo = `1.当月生效，有效期${(this.levelName=='月卡'&&'30天')||(this.levelName=='半年卡'&&'半年时间')||(this.levelName=='年卡'&&'1年时间')}
					                2.直通卡购买不可退还`
				}
			}
		},
		onShow() {
			this.deliverToken()
			this.isCoupon()
			setTimeout(() => {
				uni.setStorageSync('wxTempTrade', plus.runtime.arguments)
				console.log('plus.runtime.arguments', plus.runtime.arguments)
			}, 10)
		},
		methods: {
			paySuccess() {
				uni.navigateTo({
					url: '/pages/bossMonthCard/straightCardPaySucceed?type=' + 0
				})
			},
			monthCardSelect(id, Price, levelName) {
				this.levelName = levelName
				this.straightCardPay_id = id
				this.straightCardPay_price = Price
				this.$set(this.selectItem, 'id', id)
				this.$set(this.selectItem, 'Price', Price)
				this.$set(this.selectItem, 'levelName', levelName)
			},
			pageInit() {
				this.MonthCard_list = uni.getStorageSync('MonthCard_list')
				let id = this.isAdd ? (parseInt(this.yKType) + 1) : this.yKType
				id = id > 3 ? 1 : parseInt(id)
				this.isShowid = this.isAdd ? id - 1 : 0
				let Price = this.MonthCard_list.find(v => v.id == id).Price
				let levelName = this.MonthCard_list.find(v => v.id == id).levelName
				this.straightCardPay_id = id
				this.straightCardPay_price = Price
				this.$set(this.selectItem, 'id', id)
				this.$set(this.selectItem, 'Price', Price)
				this.$set(this.selectItem, 'levelName', levelName)
				if (this.isAdd) {
					uni.setNavigationBarTitle({
						title: '升级'
					})
				}
			},
			closePayPage() {
				this.isShowPay = false
			},
			buy() {
				this.isShowPay = true
			},
			async deliverToken() {
				let res = await this.$fetch(this.$api.activitySettlement6183, {}, 'GET')
			},
			async isCoupon() {
				let res = await this.$fetch(this.$api.card_list618, {}, 'GET')
				if (res.code) return;
				this.isCoupon618 = res.rows[0].gift618
				this.text618 = res.rows[0].gift618Msg
			},
		},
		onLoad(value) {
			this.isAdd = value.isAdd == 'true' ? true : false
			this.yKType = value.flag
			this.pageInit()
		},
	}
</script>
<style lang="less" scoped>
	.taocan-info {
		margin: 32rpx 30rpx 20rpx 30rpx;
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding-bottom: 14rpx;
	}

	.taocan-info-title {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
		margin: 32rpx 24rpx;
	}

	.month-card-info-select {
		width: 642rpx;
		height: 272rpx;
		background: #FFFFFF;
		border: 4rpx solid #F2F2F2;
		border-radius: 12rpx;
		margin: 0 24rpx 20rpx 24rpx;
	}

	.month-card-info-selected {
		width: 642rpx;
		height: 272rpx;
		background: #FFFFFF;
		border: 4rpx solid #FE4B28;
		box-shadow: 0px 0px 20rpx 0px rgba(254, 75, 40, 0.2);
		border-radius: 12rpx;
		margin: 0 24rpx 20rpx 24rpx;
	}

	.month-card-explain {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 30rpx;
		padding-bottom: 1px;
	}

	.month-card-explain-subhead {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		line-height: 48rpx;
		margin: 0 0 20rpx 25rpx;
	}

	.month-card-explain-text {
		display: block;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 44rpx;
		margin: 0 0 32rpx 25rpx;
	}

	.buy-button {
		width: 750rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #FF5628, #FF231C);
		text-align: center;
		position: fixed;
		bottom: 0;

		&>text {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			line-height: 88rpx;
			background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.month-card-info-right-title {
		// width: 202rpx;
		height: 48rpx;
		background: linear-gradient(45deg, #111832, #343B54);
		border-radius: 0px 12rpx 0px 12rpx;
		position: relative;
		float: right;

		.zhekou {
			font-size: 28rpx;
			font-weight: 500;
			color: #FCC928;
			line-height: 48rpx;
			margin-left: 18rpx;
		}

		.renshu {
			font-size: 24rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: #FFFFFF;
			line-height: 48rpx;
			margin-left: 10rpx;
			margin-right: 18rpx;
		}
	}

	.month-card-info-title {
		margin-top: 32rpx;
		margin-left: 28rpx;
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
	}

	.month-card-info-introduce {
		margin-top: 32rpx;
		margin-left: 28rpx;
		display: block;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 41rpx;
		position: relative;
		float: left;
	}

	.month-card-info-right {
		position: relative;
		float: right;
		margin-top: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 45rpx;
		margin-right: 24rpx;

		&>text {
			font-size: 66rpx;
			font-weight: bold;
			color: #FE4B28;
			line-height: 45rpx;
			margin-right: 8rpx;
		}
	}

	.month-card-info-right-youhui {
		width: 270rpx;
		height: 28rpx;
		background-color: rgba(254, 74, 40, .2);
		border-radius: 4rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #FE4B28;
		position: absolute;
		right: 0rpx;

		&>image {
			width: 22rpx;
			height: 22rpx;
		}
	}
</style>